<template>
  <div class="left-chart-2">
    <div class="lc2-header">交易数时间段统计</div>
    <el-date-picker
      class="date-picker"
      v-model="dateTime"
      type="daterange"
      align="left"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      size="mini"
      value-format="yyyy-MM-dd HH:mm:ss"
      ref="refPicker"
    >
    </el-date-picker>
    <div class="lc2-details">
      <dv-active-ring-chart class="ring-chart" :config="ordersStatusByTime" />
    </div>
  </div>
</template>

<script>
import { getOrdersStatusByTime } from "../../../Api/leadership/logistics";
import { formatTime } from "../../../utils/utils";
export default {
  name: "LeftChart2",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateTime: [],
      ordersStatusByTime: {
        data: [],
        colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
        unit: "件",
        showOriginValue: true,
      },
    };
  },
  watch: {
    dateTime(rangeTime) {
      console.log("rangeTime: ", rangeTime);
      this.setOrdersStatusByTime(rangeTime[0], rangeTime[1]);
    },
  },
  methods: {
    async setOrdersStatusByTime(startTime, endTime) {
      const { data: res } = await getOrdersStatusByTime(startTime, endTime);
      if (res.statusCode !== 20000) {
        console.error(res.message);
      } else {
        this.ordersStatusByTime.data = res.data.map((item) => ({
          name: item.order_status == 1 ? "未送达" : "已送达",
          value: Number(item.count),
        }));
        this.ordersStatusByTime = { ...this.ordersStatusByTime };
      }
    },
  },
  mounted() {
    // 默认显示最近一个月
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    this.dateTime = [formatTime(start), formatTime(end)];
  },
};
</script>

<style lang="scss" scoped>
.left-chart-2 {
  width: 100%;
  height: 100%;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  .lc2-header {
    padding: 20px 0;
  }
  .date-picker {
    width: 250px;
  }
  .lc2-details {
    .ring-chart {
      width: 100%;
      height: 250px;
    }
  }
}
</style>
